<template>
    <div class="nav flex at-center " :class="fixed?'fixed-top':''">
        <div class="container flex j-a at-center " style="height: 60px;">
            <h1>知识星球</h1>
            <ul class="flex" @click="changeNav">
                <li>首页</li>
                <!-- <li>话题</li> -->
                <li>标签</li>
            </ul>
            <div class="search-box flex at-center">
                <input type="text" ref="searchRef" v-model="searchWord" class="search-input" placeholder="请输入...">
                <button @click="search()">搜索</button>
            </div>
            <div class="btn-box">
                <button class="btn" style="width: 70%;" @click="()=>{router.push('/create')}">
                <svg-icon iconName="icon-xiazai48" ></svg-icon>
                    开始创作</button>
            </div>
            <div class="flex at-center notice" style="cursor: pointer;" @click="toNotice()">
                <svg-icon iconName = "icon-tongzhi" style="font-size: 32px;"></svg-icon>
                <span v-if="noticeCount!=0" class="notice-num" style="">{{noticeCount}}</span>
            </div>
            <div class="btn-box" v-if="!getItem('curUserInfo')">
                <button class="btn">登录</button>
                <button class="btn">注册</button>
            </div>
            <div class="btn-box" style="justify-content: end;" v-if="getItem('curUserInfo')">
                <n-dropdown trigger="hover" :options="selfOptions" :show-arrow="true" @select="handleSelf" >
                    <div style="width: 60px;height: 60px;">
                        <img style="width:100%;height: 100%;border-radius: 50% 50%; border: 2px solid #000;" :src="`http://127.0.0.1:7001/public${getItem('curUserInfo').avatar}`" alt="">
                    </div>
                </n-dropdown>
            </div>
        </div>
    </div>
    <div style="padding:15px 0">
        <router-view></router-view>
    </div>
    <n-drawer v-model:show="active" :width="502" :placement="placement">
    <n-drawer-content title="消息列表"  style="position:relative">
        <n-card style="margin-top: ;width: 100%;" v-for="(item,index) in noticeList" :key="index">
        <div style="font-size: 14px;color: #ccc;">{{ item.create_time }}</div>
        <div style="display: flex; justify-content: space-between;">
            <div style="font-size: 16px;" class="content">{{ item.content }}</div>
            <div class="handle">
                <n-button v-if="item.isRead ==0" size="small" style="margin-right: 10px;" @click="read(item.id)">标记为已读</n-button>
                <n-tag  v-if="item.isRead ==1" style="margin-right: 10px;">已读</n-tag>
                <n-button type="error" size="small" @click="deleteMsg(item.id)">删除</n-button>
            </div> 
        </div>
      </n-card>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup lang="ts">
import type { DrawerPlacement } from 'naive-ui'
    import { getItem, removeItem } from '@/utils/local';
    import { ref,onMounted } from 'vue';
    import {useRouter,useRoute,onBeforeRouteUpdate} from 'vue-router'
    import { useUserInfoStore,useAuthStore } from '@/store/main'
    import requestList from '@/service/request';
    
    const userStore = useUserInfoStore()
    const authStore = useAuthStore()
    const router = useRouter()
    const route = useRoute()
    const changeNav =(e:any) =>{
        for(let i = 0;i<e.target.parentNode.children.length;i++){
            e.target.parentNode.children[i].classList.remove('li-active')
        }
        e.target.classList.add('li-active')
        const menu = [
            {text:'首页',path:'home'},
            // {text:'话题',path:'topic'},
            {text:'标签',path:'tags'},
        ]
        menu.forEach((item:any)=>{
            e.target.innerText === item.text && router.push(item.path)
        })
    }

    // 头像下拉
    const selfOptions = ref([
        {
          label: '个人中心',
          key: "self"
        },
        {
          label: '退出',
          key: 'logout'
        },
        {
          label:'我的后台',
          key:'console'
        }
    ])
    const handleSelf = (key: string | number)=>{
        const handleGroup:any = {
            'self':()=>{
                router.push('/self')
            },
            'logout':()=>{
                removeItem('curUserInfo')
                removeItem('token')
                authStore.myToken = ''
                authStore.refreshToken = ''
                userStore.userInfo = ''
                router.push('/login')
            },
            'console':()=>{
                window.open('http://localhost:4500/#/login')
            },
        }
        handleGroup[key]()
    }

    const fixed = ref(false)

    const active = ref(false)
    const placement = ref<DrawerPlacement>('right')
    const activate = (place: DrawerPlacement) => {
      active.value = true
      placement.value = place
    }
    const toNotice = () => {
        activate('right')
    }

    const noticeCount = ref(0)
    const noticeList = ref<any[]>([])
    const getNoticeList = async () => {
      const res = await requestList.getMsgByUserApi({userId:getItem('curUserInfo').id})
      if(res.code === 1){
          noticeList.value = res.data as any
          noticeCount.value = (res.data as any).filter((item:any)=>(!item.isRead)).length
      }
    }

    const read = async (id:number) => {
      const postData = {
          ids:[id],
          isRead:1
      }
      const res = await requestList.changeReadStatusApi(postData)
      if(res.code === 1){ 
          setTimeout(()=>{
            getNoticeList()
          },300)
      }
    }

    const deleteMsg = async (id:number) => {
      const postData = {
          ids:[id],
      }
      const res = await requestList.UserDeleteMsgApi(postData)
      if(res.code === 1){ 
        setTimeout(()=>{
            getNoticeList()
        },300)
      }
    }

    const searchRef = ref()
    const searchWord = ref<string>('')
    const search = () => {
        if(searchWord.value.trim()===''){
            router.push('/home')
            return
        }
        router.push({
            path:'/search',
            query:{searchWord:searchWord.value}
        })
    }

    onMounted(()=>{
        getNoticeList()
        window.onscroll = () => {
            fixed.value = document.documentElement.scrollTop >= 200? true:false
        }
        
    })
</script>

<style scoped lang="scss">
.nav{
    background-color: $white;
    height: $navHeight;
    border-bottom: 1px solid #f2f2f2;
    ul{
        margin-left: 35px;
        height: 100%;
        li{
            cursor: pointer;
            position: relative;
            height: 100%;
            padding: 0 10px;
            width: 70px;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
    .search-box{
        padding: 5px 10px;
        border: 1px solid;
        border-radius: 4px;
        .search-input{
            height: 30px;
            border: 0;
            outline: none;
            background: inherit;
            width: 280px;
        }
        button{
            box-sizing: border-box;
            height: 30px;
            width: $navHeight;
            outline: none;
            padding: 0 10px;
            text-align: center;
            background: $color3;
            border: 0;
            border: 1px solid;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover{
            opacity: 0.7;
        }
    }
    .btn-box{
        width: 180px;
        display: flex;
        justify-content: space-around;
        .btn{
            box-sizing: border-box;
            height: 40px;
            width: 80px;
            outline: none;
            padding: 0 10px;
            text-align: center;
            background: $color3;
            border: 0;
            border: 1px solid;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn:hover{
            opacity: .7;
        }
    }
    .notice{
        transition: all .4s;
        &-num{
            font-size: 8px;background-color: tomato; color: aliceblue;border-radius: 50%;padding: 2px 4px;font-weight: 600;
        }
        &:hover{
            transform: translateY(-4px);
        }
    }
}

.li-active::after{
    position: absolute;
    content: '';
    width: 100%;
    height: 4px;
    background: #333;
    bottom: -10px;
}

</style>